<template>
	<el-dialog 
		v-model="visible"
		:modal="true"
		:append-to-body="true"
		:close-on-click-modal="false"
		width="460px"
		align-center
		@close="onClose"
		destroy-on-close
		class="add-friend-dialog">
		<template #header>
			<div class="dialog-header">
				<span class="title">添加好友</span>
				<span class="subtitle">搜索并添加好友开始聊天</span>
			</div>
		</template>
		
		<div class="search-container">
			<el-input
				v-model="searchText"
				placeholder="请输入用户名或昵称搜索"
				clearable
				@keyup.enter="onSearch"
				class="search-input">
				<template #prefix>
					<el-icon><Search /></el-icon>
				</template>
			</el-input>
		</div>

		<div class="result-container">
			<el-scrollbar height="360px">
				<template v-if="users.length > 0">
					<div v-for="user in users" 
						:key="user.id" 
						v-show="user.id != $store.state.userStore.userInfo.id"
						class="user-item">
						<div class="user-info">
							<div class="avatar-wrapper">
								<head-image 
									:name="user.nickName"
									:url="user.headImage"
									:size="46"
									:online="user.online">
								</head-image>
								<div class="online-dot" :class="{ 'is-online': user.online }"></div>
							</div>
							<div class="user-detail">
								<div class="primary-info">
									<span class="username">{{ user.userName }}</span>
									<el-tag 
										:type="user.online ? 'success' : 'info'" 
										size="small" 
										effect="light"
										class="status-tag">
										{{ user.online ? '在线' : '离线' }}
									</el-tag>
								</div>
								<div class="secondary-info">
									<span class="nickname">昵称：{{ user.nickName }}</span>
								</div>
							</div>
						</div>
						<div class="action-area">
							<el-button
								v-if="!isFriend(user.id)"
								type="primary"
								size="small"
								round
								@click="onAddFriend(user)">
								<template #icon>
									<el-icon><Plus /></el-icon>
								</template>
								添加
							</el-button>
							<el-button
								v-else
								type="info"
								size="small"
								round
								disabled>
								<template #icon>
									<el-icon><Check /></el-icon>
								</template>
								已添加
							</el-button>
						</div>
					</div>
				</template>
				<el-empty
					v-else-if="hasSearched"
					description="未找到相关用户"
					:image-size="120">
				</el-empty>
				<div v-else class="initial-state">
					<el-icon class="search-icon"><Search /></el-icon>
					<span>输入用户名或昵称搜索好友</span>
				</div>
			</el-scrollbar>
		</div>
	</el-dialog>
</template>

<script>
	import HeadImage from '../common/HeadImage.vue'
	
	export default {
		name: "addFriend",
		components: {
			HeadImage,
		},
		data() {
			return {
				users: [],
				searchText: "",
				visible: false,
				hasSearched: false
			}
		},
		props: {
			dialogVisible: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			dialogVisible: {
				immediate: true,
				handler(val) {
					this.visible = val;
				}
			},
			visible(val) {
				if (!val) {
					this.$emit('close');
				}
			}
		},
		methods: {
			onClose() {
				this.visible = false;
				this.searchText = '';
				this.users = [];
				this.hasSearched = false;
			},
			onSearch() {
				if (!this.searchText.trim()) {
					this.$message.warning('请输入搜索内容');
					return;
				}
				this.$http({
					url: "/user/findByName",
					method: "get",
					params: {
						name: this.searchText
					}
				}).then((data) => {
					this.users = data;
					this.hasSearched = true;
					if (this.users.length === 0) {
						this.$message.info('未找到相关用户');
					}
				})
			},
			onAddFriend(user) {
				this.$http({
					url: "/friend/add",
					method: "post",
					params: {
						friendId: user.id
					}
				}).then((data) => {
					this.$message.success("添加成功，对方已成为您的好友");
					let friend = {
						id: user.id,
						nickName: user.nickName,
						headImage: user.headImage,
						online: user.online
					}
					this.$store.commit("addFriend", friend);
					this.$emit('refresh-friends');
				})
			},
			isFriend(userId) {
				let friends = this.$store.state.friendStore.friends;
				let friend = friends.find((f) => f.id == userId);
				return friend != undefined;
			}
		}
	}
</script>

<style lang="scss">
	// 定义通用的mixins
	@mixin text-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.add-friend-dialog {
		.el-dialog {
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 12px 32px 4px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .08);
			
			.el-dialog__header {
				margin: 0;
				padding: 20px 20px 16px;
				border-bottom: 1px solid var(--el-border-color-lighter);
				
				.dialog-header {
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.title {
						font-size: 18px;
						font-weight: 600;
						color: var(--el-text-color-primary);
						margin-bottom: 4px;
					}
					
					.subtitle {
						font-size: 13px;
						color: var(--el-text-color-secondary);
					}
				}
			}
			
			.el-dialog__body {
				padding: 20px;
			}
		}
		
		.search-container {
			margin-bottom: 16px;
			
			.search-input {
				.el-input__wrapper {
					box-shadow: 0 0 0 1px var(--el-border-color) inset;
					padding-left: 12px;
					
					&:hover {
						box-shadow: 0 0 0 1px var(--el-color-primary) inset;
					}
					
					&.is-focus {
						box-shadow: 0 0 0 1px var(--el-color-primary) inset;
					}
				}
				
				.el-input__inner {
					height: 40px;
					font-size: 14px;
				}
			}
		}
		
		.result-container {
			.initial-state {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 300px;
				color: var(--el-text-color-secondary);
				
				.search-icon {
					font-size: 32px;
					margin-bottom: 12px;
					opacity: 0.7;
				}
				
				span {
					font-size: 14px;
				}
			}
			
			.user-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 12px;
				border-radius: 8px;
				transition: all 0.3s ease;
				
				&:hover {
					background-color: var(--el-fill-color-light);
				}
				
				.user-info {
					display: flex;
					align-items: center;
					flex: 1;
					min-width: 0;
					
					.avatar-wrapper {
						position: relative;
						margin-right: 12px;
						
						.online-dot {
							position: absolute;
							right: 0;
							bottom: 0;
							width: 10px;
							height: 10px;
							border-radius: 50%;
							border: 2px solid #fff;
							background-color: var(--el-text-color-placeholder);
							
							&.is-online {
								background-color: var(--el-color-success);
							}
						}
					}
					
					.user-detail {
						flex: 1;
						min-width: 0;
						
						.primary-info {
							display: flex;
							align-items: center;
							margin-bottom: 4px;
							
							.username {
								font-size: 15px;
								font-weight: 500;
								color: var(--el-text-color-primary);
								margin-right: 8px;
								@include text-ellipsis;
							}
							
							.status-tag {
								flex-shrink: 0;
								padding: 0 8px;
								height: 20px;
								line-height: 18px;
							}
						}
						
						.secondary-info {
							.nickname {
								font-size: 13px;
								color: var(--el-text-color-secondary);
								@include text-ellipsis;
							}
						}
					}
				}
				
				.action-area {
					margin-left: 16px;
					
					.el-button {
						padding: 6px 16px;
						
						.el-icon {
							margin-right: 4px;
						}
					}
				}
			}
		}
	}
</style>
